<template>
    <div>
        <p>
            <button v-on:click="add()" class="btn btn-white btn-default btn-round">
                <i class="ace-icon fa fa-edit red2"></i>
                新增
            </button>
            &nbsp;
            <button v-on:click="list(1)" class="btn btn-white btn-default btn-round">
                <i class="ace-icon fa fa-refresh red2"></i>
                刷新
            </button>
        </p>

        <pagination ref="pagination" v-bind:list="list" v-bind:item-count="5"></pagination>

        <table id="simple-table" class="table  table-bordered table-hover">
            <thead>
            <tr>
                <#list fieldList as field>
                    <#if field.nameHump!="createdAt" && field.nameHump!="updatedAt">
                        <th>${field.nameCn}</th>
                    </#if>
                </#list>
                <th>操作</th>
            </tr>
            </thead>

            <tbody>
            <tr v-for="${entity} in ${entity}s">
                <#list fieldList as field>
                    <#if field.nameHump!="createdAt" && field.nameHump!="updatedAt">
                        <#if field.enums>
                            <td>{{$filters.optionKVObject(${field.enumsConst},${entity}.${field.nameHump})}}></td>

                        <#else>
                            <td>{{${entity}.${field.nameHump}}}</td>
                        </#if>
                    </#if>
                </#list>
                <td>
                    <div class="hidden-sm hidden-xs btn-group">

                        <button v-on:click="edit(${entity})" class="btn btn-xs btn-info">
                            <i class="ace-icon fa fa-pencil bigger-120"></i>
                        </button>

                        <button v-on:click="del(${entity}.id)" class="btn btn-xs btn-danger">
                            <i class="ace-icon fa fa-trash-o bigger-120"></i>
                        </button>

                    </div>

                </td>
            </tr>
            </tbody>
        </table>

        <div id="form-modal" class="modal fade" tabindex="-1" role="dialog">
            <div class="modal-dialog" role="document">
                <div class="modal-content">
                    <div class="modal-header">
                        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span
                                    aria-hidden="true">&times;</span></button>
                        <h4 class="modal-title">新增/修改</h4>
                    </div>
                    <div class="modal-body">
                        <form class="form-horizontal">

                            <#list fieldList as field>
                                <#if field.name!="id" && field.nameHump!="createdAt" && field.nameHump!="updatedAt">
                                    <#if field.enums>
                                        <div class="form-group">
                                            <label class="col-sm-2 control-label">${field.nameCn}</label>
                                            <div class="col-sm-10">
                                                <select v-model="${entity}.${field.nameHump}" class="form-control">
                                                    <option v-for="o in ${field.enumsConst}" v-bind:value="o.key">
                                                        {{o.value}}
                                                    </option>
                                                </select>
                                            </div>
                                        </div>
                                    <#else>
                                        <div class="form-group">
                                            <label class="col-sm-2 control-label">${field.nameCn}</label>
                                            <div class="col-sm-10">
                                                <input v-model="${entity}.${field.nameHump}" class="form-control">
                                            </div>
                                        </div>
                                    </#if>
                                </#if>
                            </#list>

                        </form>
                    </div>
                    <div class="modal-footer">
                        <button v-on:click="save()" type="button" class="btn btn-primary">保存</button>
                        <button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
                    </div>
                </div><!-- /.modal-content -->
            </div><!-- /.modal-dialog -->
        </div><!-- /.modal -->

    </div>
</template>

<script>

  import Pagination from "../../components/pagination"

  export default {
    components: {Pagination},
    name: "${module}-${entity}",
    data: function () {
      return {
        ${entity}:{},
        ${entity}s: [],
        <#list fieldList as field>
          <#if field.enums>
        ${field.enumsConst}: ${field.enumsConst},
         </#if>
        </#list>
      }
    },
    mounted() {
      let _this = this;
      _this.$refs.pagination.size = 5;
      _this.list(1);
      // sidebar激活样式方法一
      //this.$parent.activeSidebar("${module}-${entity}-sidebar");
    },
    methods: {
      /**
       * 点击【新增】
       */
      add() {
        let _this = this;
        _this.${entity} = {};
        $("#form-modal").modal("show");
      },
      /**
       * 点击【编辑】
       * @param ${entity}
       */
      edit(${entity}) {
        let _this = this;
        _this.${entity} = $.extend({}, ${entity});
        $("#form-modal").modal("show");
      },
      /**
       * 列表查询
       * @param page
       */
      list(page) {
        let _this = this;
        Loading.show();
        _this.$axios.post(process.env.VUE_APP_SERVER + "/${module}/admin/${entity}/get${Entity}List", {
          page: page,
          size: _this.$refs.pagination.size
        }).then((res) => {
          Loading.hide();
          let resp = res.data;
          _this.${entity}s = resp.data.list;
          _this.$refs.pagination.render(page, resp.data.total);
        })
      },
      /**
       * 点击【保存】
       */
      save() {
        let _this = this;

        // 保存校验
        if (1 != 1
          <#list fieldList as field>
          <#if field.name!="id" && field.nameHump!="createdAt" && field.nameHump!="updatedAt" && field.nameHump!="sort">
          <#if !field.nullAble>
          || !Validator.require(_this.${entity}.${field.nameHump}, "${field.nameCn}")
          </#if>
          <#if (field.length > 0)>
          || !Validator.length(_this.${entity}.${field.nameHump}, "${field.nameCn}", 1, ${field.length?c})
          </#if>
          </#if>
          </#list>
        ) {
          return;
        }

        Loading.show();
        _this.$axios.post(process.env.VUE_APP_SERVER + "/${module}/admin/${entity}/save", _this.${entity}).then((res) => {
          Loading.hide();
          let resp = res.data;
          if (0 === resp.code) {
            $("#form-modal").modal("hide");
            _this.list(1);
            Toast.success("保存成功!");
          } else {
            Toast.warning(resp.msg);
          }
        })
      },
      /**
       * 点击【删除】
       * @param id
       */
      del(id) {
        let _this = this;
        Confirm.show("删除${tableNameCn}后不可恢复，确认删除?", function () {
          Loading.show();
          _this.$axios.delete(process.env.VUE_APP_SERVER + "/${module}/admin/${entity}/delete/" + id).then((res) => {
            Loading.hide();
            let resp = res.data;
            if (0 === resp.code) {
              _this.list(1);
              Toast.success("删除成功!");
            }
          })
        });
      }
    }
  }

</script>